<template>
  <div>
    <el-card class="box-card">
      <PageTools :totalNum="total">
        <!-- 新增按钮 -->
        <template #buttonPart>
          <el-button type="success" icon="el-icon-edit" size="medium" @click="addNew">新增目录</el-button>
        </template>
        <!-- 表单 -->
        <template #formPart>
          <el-form
            :inline="true"
            :model="formInline"
            class="form-inline"
            ref="formInline"
            :rules="rules">
            <el-form-item label="目录名称" prop="directoryName">
              <el-input v-model="formInline.directoryName" placeholder="根据目录名称搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </template>
      </PageTools>

      <!-- 数据列表 -->
      <div class="table-content">
          <el-table
            v-loading="loading"
            :data="listData"
            style="width: 100%">
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="80">
            </el-table-column>

            <el-table-column
              align="center"
              prop="subjectName"
              label="所属学科"
              width="200">
            </el-table-column>

            <el-table-column
              align="center"
              prop="directoryName"
              label="目录名称"
              width="150">
            </el-table-column>

            <el-table-column
              align="center"
              prop="username"
              label="创建者"
              width="150">
            </el-table-column>

            <el-table-column
              align="center"
              label="创建日期"
              width="200">
              <template #default="{row}">
                <span>{{ row.addDate | timeTrans }}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="totals"
              label="面试题数量"
              width="120">
            </el-table-column>

            <el-table-column
              align="center"
              label="状态"
              width="120">
              <template #default="{row}">
                <span v-if="row.state === 0">已禁用</span>
                <span v-else>已启用</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template #default = "{row}">
                <el-button type="text" @click="updateState(row)">
                  <span v-if="row.state === 0">启用</span>
                  <span v-else>禁用</span>
                </el-button>
                <el-button type="text" :disabled="row.state===1" @click="updateCatalogue(row.id)">修改</el-button>
                <el-button type="text" :disabled="row.state===1" @click="deleCata(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>

      <!-- 分页标签 -->
      <div class="page-divided">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="params.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <LsDialog
      :visible.sync="visible"
      :passId="passId"
      :isAdd="isAdd"
      :isLabel="isLabel"
      @success="getList(params)"
    ></LsDialog>
  </div>
</template>

<script>
import PageTools from '@/components/PageTools/index.vue'
import LsDialog from '../components/LsDialog.vue'
import { getCatalogueList, updateCatalogueState, deleteCatalogue } from '@/api/subjectmanage'
export default {
  name: 'CatalogueVue',

  components: {
    PageTools,
    LsDialog
  },

  data() {
    return {
      formInline: {
        directoryName: '',
        state: null
      },
      rules: {
        directoryName:[{type: 'string'}],
        state: []
      },
      params: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      currentPage: 1,
      listData: [],
      visible: false,
      passId: 0,
      isAdd: true,
      isLabel: '目录',
      loading: false
    }
  },

  methods: {
    resetForm() {
      this.$nextTick(()=>{
        this.$refs.formInline.resetFields()
      })
    },
    onSearch() {
      if(!this.formInline.directoryName && !this.formInline.state){
        this.getList(this.params)
      }else {
        this.getList({
          ...this.params,
          directoryName: this.formInline.directoryName,
          state: parseInt(this.formInline.state)
        })
      }
    },
        // 处理分页
    handleSizeChange(val) {
      this.params.pagesize = val
      if(this.formInline.state === '' && this.formInline.directoryName === ''){
        this.getList(this.params)
      }else {
        this.onSearch()
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.params.page = val
      if(this.formInline.state === '' && this.formInline.directoryName === ''){
        this.getList(this.params)
      }else {
        this.onSearch()
      }
    },
    // 获取列表
    async getList(params) {
      this.loading = true
      const res = await getCatalogueList(params)
      this.total = res.counts
      this.listData = res.items
      this.loading = false
    },
    // 修改状态
    async updateState(row) {
      if(row.state === 1){
        await updateCatalogueState(row.id, 0)
      }else {
        await updateCatalogueState(row.id, 1)
      }
      this.getList(this.params)
    },
    // 新增目录
    addNew() {
      this.visible = true
      this.passId = null
      this.isAdd = true
    },
    // 修改目录
    updateCatalogue(id){
      this.visible = true
      this.passId = id
      this.isAdd = false
    },
    // 删除目录
    deleCata(id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await deleteCatalogue(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList(this.params)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  created() {
    this.getList(this.params)
    this.resetForm()
  }
}
</script>

<style lang="scss" scoped>
.page-divided{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.table-content{
  margin-top: 20px;
}
</style>
